<template>
  <div class="page-editTemplate" id="editTemplate">
    <header>
      <el-tabs v-model="tab" @tab-click="handleClick">
        <el-tab-pane label="设置合同内容" name="1"></el-tab-pane>
        <el-tab-pane label="设置签署区" name="2"></el-tab-pane>
      </el-tabs>
    </header>
    <div class="nameInput">
      <div class="label"><span class="require">*</span> 模板名称</div>
      <el-input v-model="templateName" placeholder="请输入模板名称"></el-input>
    </div>
    <ContractContent :templateContent="templateContent" ref="editorContent" v-show="tab == 1" />
    <ContractSignArea :stampAreas="stampAreas" v-show="tab == 2" />
    <footer class="footer">
      <div class="box">
        <el-button @click="$router.back()">取 消</el-button>
        <el-button type="primary" @click="next">{{ tab == "1" ? "下一步" : "上一步" }}</el-button>
        <el-button v-if="tab == 2" type="primary" @click="save">保存</el-button>
      </div>
    </footer>
  </div>
</template>
<script>
import ContractContent from "./ContractContent.vue";
import ContractSignArea from "./ContractSignArea.vue";

export default {
  components: { ContractContent, ContractSignArea },
  data() {
    return {
      tab: "1",
      templateId: "",
      stampAreas: [],
      templateContent: "",
      templateName: "",
    };
  },

  methods: {
    next() {
      this.tab = this.tab == "1" ? "2" : "1";
    },
    async save() {
      if (!this.templateName) return this.$message({ type: "warning", message: "请输入模板名称" });

      const dragContainer = document.querySelector(".drag-container");
      const dragDom = document.querySelectorAll(".drag-dom");
      dragContainer.scrollTop = 0; //回到顶部 否则坐标错误
      // console.log(dragDom[0].style.display); //筛出display 不为 'none' 的元素
      // console.log(dragDom[0].style.opacity); // 根据opacity判断是什么类型的签署区  员工签署区  公司签署区
      let stampAreas = [];
      let width = 80;
      for (let i = 0; i < dragDom.length; i++) {
        if (dragDom[i]?.style.display !== "none") {
          stampAreas.push({
            width: width,
            order: 1,
            isPersonal: dragDom[i].style.opacity == 1 ? true : dragDom[i].style.opacity == 2 ? false : null,

            // 没有分页的
            // posPage: 1,
            // posX: dragDom[i].getBoundingClientRect().x - dragContainer.getBoundingClientRect().x + 80,
            // posY: 841 - 80 - (dragDom[i].getBoundingClientRect().y - dragContainer.getBoundingClientRect().y),

            // 分页
            posPage: Math.floor((dragDom[i].getBoundingClientRect().y - dragContainer.getBoundingClientRect().y) / 841) + 1,
            posX: dragDom[i].getBoundingClientRect().x - dragContainer.getBoundingClientRect().x + 80,
            posY: 841 - 80 - ((dragDom[i].getBoundingClientRect().y - dragContainer.getBoundingClientRect().y) % 841),
            // 841 - 80 - y =  (dragDom[i].getBoundingClientRect().y - dragContainer.getBoundingClientRect().y) % 841
            // 10    x/841 = posPage ................841 - 80 - y

            // 80 125 对应左下角      pdf w560 h840    box h200 w80
            // posX:680,
            // posY:125 + 840
          });
        }
      }
      let contentHtml = this.$refs.editorContent.editor.txt.html();
      let contentHeighjt = document.getElementsByClassName("edit-content")[0].offsetHeight;
      let signedHeight = document.getElementsByClassName("drag-container")[0].scrollHeight; //Math.max(...stampAreas.map((m) => m.posY));
      //如果印章的y轴最大值 大于内容的高度 那么将重设内容的高度印章包含在内容中
      if (signedHeight > contentHeighjt) {
        //Y轴 + 印章的高度 + 20px的页脚
        contentHtml = `<div style="width:100%;height:${signedHeight + 50}px" start >${contentHtml}</div>`;
      }
      await this.$api.optionsManage[this.templateId ? "EditTemplate" : "AddContractTemplate"]({ stampAreas, enable: true, templateContent: contentHtml, templateName: this.templateName }, this.templateId);
      this.$router.replace("/contractTemplate");
    },
    handleClick(e) {},
  },

  async mounted() {
    if (!this.$route.query.templateId) return;
    const { templateId } = this.$route.query;
    this.templateId = templateId;
    const {
      data: {
        data: { stampAreas, templateContent, templateName },
      },
    } = await this.$api.optionsManage.GetTemplateContent({ templateId });

    this.templateName = templateName;
    this.stampAreas = stampAreas;
    let tempHtml = templateContent.substr(templateContent.indexOf("start >") + 7);
    tempHtml = tempHtml.substr(0, tempHtml.length - 6);
    this.templateContent = tempHtml;
  },
};
</script>
<style lang="less" scoped>
.page-editTemplate {
  display: flex;
  flex-direction: column;
  .nameInput {
    width: 300px;
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-left: 20px;
    .label {
      width: 100px;
      font-size: 15px;
      .require {
        color: red;
      }
    }
  }

  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    border-top: 1px solid #ccc;
  }
}
:deep( .el-tabs__header) {
  margin: 0;
}
:deep( .el-tabs__nav-scroll) {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
